<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2D、2.5D地图加载</title>
     <!-- 引入CSS文件 -->
    <link href='../static/css/bundle.css' rel='stylesheet'/>
    <!-- 引入js文件 -->
    <script src="../static/js/bundle.js"></script>
	<script src="../static/js/config.js"></script>
</head>

<body>
<div id="map" style='width: 1440px; height: 600px;'></div>
<div>
<div>鼠标放到地图上，按下键盘上的Ctrl键，通过鼠标左键可以体验地图360度旋转和上下2D、2.5D效果</div>

</div>
<script type="application/javascript" th:inline="javascript">
    //配置地图调用授权Token
    creeper.CreeperConfig.token = "eHk6NTU5OWI1ZmNlNzFjNDcwNzg4M2E3YTU5NDc1ZGQxODA=";
    //配置地图ID、地图接口地址
    var vectorMap = new creeper.VectorMap('map', config.wmapId, config.mapBaseUrl);

    var marker = undefined;
    vectorMap.on('load',function () {
        var info = [[${info}]];
        marker = new creeper.Marker().setLngLat(info).addTo(vectorMap)
    });

    vectorMap.on('load', function () {
        vectorMap.on('click', function (e) {
            var features = vectorMap.queryRenderedFeatures(e.point);


            if (features.length > 0) {
                var feature = features[0];

                alert(JSON.stringify(feature.properties));
            }
        })
    })
</script>
</body>
</html>